* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@blueBlack: #041527;
@blueDark: #022c57;
@blueDeep: #17538f;
@blueNormal: #1b69b7;
@blueLight: #2d91f3;
@blueLightLight: #74b4f3;
@blueWight: #c5eaff;
@blueWightLight: #d9e9ff;

// ===== 一条事件
.eventItem {
  width: 90%;
  min-height: 60px;
  background-color: @blueWight;
  margin: 20px auto;
  position: relative;
  overflow: hidden;

  transition: all 0.5s;

  &:hover {
    box-shadow: @blueBlack 5px 5px 10px;
  }

  @cRate: 80%;

  .eventContent {
    text-indent: 2em;
    font-size: 20px;
    //outline: solid 1px;
    padding: 10px 20px;
    float: right;
    width: @cRate;
    font-family: 微软雅黑, serif;
  }

  .deadLine {
    float: left;
    width: 100%-@cRate;
    background-color: @blueDeep;
    color: @blueWightLight;
    //outline: solid 1px;
    //height: 50px;
    //line-height: 50px;

    span {
      //outline: solid 1px;
      user-select: none;
      display: block;
      text-align: center;
      font-family: Consolas, fantasy;
    }

    .dateSpan {
      padding-top: 5px;
    }

    .timeSpan {
      //margin-left: 10px;
      font-size: 20px;
      line-height: 2em;
      font-weight: bolder;
    }
  }

  .delBtn {
    position: absolute;
    @L: 20px;
    //right: (-@L/2);
    right: 0;
    //top: (-@L/2);
    top: 0;
    //bottom: 0;
    background-color: @blueDark;
    color: whitesmoke;

    width: @L;
    height: @L;
    //border-radius: 100px;
    user-select: none;
    text-align: center;
    line-height: @L;
    transition: all 0.2s;

    &:hover {
      //transform: scale(1.1);
      width: @L+10;
      height: @L+10;
      line-height: @L+10;
      cursor: pointer;
    }

    &:active {
      @nL: (@L)-5;
      width: @nL;
      height: @nL;
      line-height: @nL;
      //transform: scale(0.9);
    }
  }
}

body {
  //background-color: #15559a;
  //color: whitesmoke;

  h1 {
    text-align: center;
    line-height: 2em;
    background-color: @blueDeep;
    color: whitesmoke;
    //background-color: #126bae;
  }

  main {
    //height: 600px;
    min-height: 600px;
    //outline: solid 1px;
    background-color: @blueLightLight;
    overflow: hidden;
    padding-bottom: 50px;

    .left, .right {
      width: 50%;
      overflow: hidden;
      //background: hotpink;
      float: left;
      //outline: solid 1px;

      h2 {
        text-align: center;
        //outline: solid 1px;
        line-height: 2em;
        background-color: @blueDeep;
        color: @blueWight;
      }
    }

    .temp {
      width: 95%;
      margin: 10px auto 0;
      min-height: 100px;
      //outline: solid 1px;
      overflow: hidden;
      //background-color: lightpink;
    }

    .left {
      .eventTemp {
      }

      .inputArea {
        @H: 50px;
        height: @H;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
        //background-color: cornflowerblue;
        vertical-align: middle;

        input.newInput {
          height: 100%;
          width: 60%;
          //border: none;
          //border-radius: 30px;
          background-color: @blueWightLight;
          font-size: 20px;
          padding-right: 10px;
          padding-left: 10px;
          border: none;

          &:focus {
            border: none;
            outline: none;
          }
        }

        button.newBtn {
          font-size: 16px;
          @h: 30px;
          height: 100%;
          transform: translateY(-0px) translateX(-5px);
          //height: @h;
          //line-height: @h;
          //margin-left: 20px;
          padding: 2px 10px;
          //box-sizing: content-box;
          border-radius: 1px;
          border: none;
          background-color: @blueNormal;
          color: whitesmoke;
          transition: all 0.2s;

          &:hover {
            //transform: scale(1.1);
            cursor: pointer;
          }

          &:active {
            transform: scale(0.9);
          }
        }
      }

      .timeSelect {
        height: 45px;
        //outline: solid 1px;
        text-align: center;


        span {

        }

        input {
          font-size: 20px;
          height: 100%;
          border: none;
          //outline: solid 1px;
          font-family: Consolas, fantasy;
          background-color: @blueWightLight;

          &:focus {
            outline: none;
          }
        }

        .dateSet {

        }

        .timeSet {
          margin-left: -5px;
        }
      }
    }

    .right {
      .overEventTemp {
      }
    }
  }

  footer {
    //height: 100px;
    padding: 20px;
    color: lightgray;
    background-color: @blueDark;

    h3, p {
      text-align: center;
    }

    p {
      line-height: 1.5em;
    }
  }
}
